<template>
  <view class="modal-content show" v-if="modalStatus">
    <view class="modal-box" :style="{ height: height + 'rpx' }">
      <view v-if="0" class="close-modal" @click="onClose">
        <icon type="cancel" size="28" color="#fff"></icon>
      </view>
      <view v-if="isTitle" class="modal-tit">{{ title }}</view>
      <view class="scmodel-content">
        <view class="mt-6">当前手机号存在多个账号</view>

        <view v-if="!show1">
          <view class="btnConfirm mt-36" @click="userUpdate">{{
            "当前账号作为独立账号"
          }}</view>
          <view class="btnConfirm mt-36" @click="show1 = true">{{
            "绑定指定账号作为主账号"
          }}</view>
        </view>

        <view v-if="show1">
          <input
            class="mt-20 border"
            v-model="userCode"
            maxlength="10"
            type="text"
            placeholder="请输入用户身份码"
          />
          <view class="btnConfirm mt-31" @click="updateMsg">{{
            "确认绑定"
          }}</view>
          <view class="btnConfirm btnCancel mt-26" @click="show1 = !show1">{{
            "取消"
          }}</view>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
export default {
  name: "scModal",
  data() {
    return {
      modalStatus: this.show,
      show1: false,
			userCode: "",
    };
  },
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    // 弹窗默认高度
    height: {
      type: [String, Number],
      default: 360,
    },
    
    isTitle: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "温馨提示",
    },
  },
  watch: {
    show(newVal, oldVal) {
      // console.log('show',newVal,oldVal)
      this.modalStatus = newVal;
    },
  },

  methods: {
    onClose() {
      var popup = {
        show: false,
        type: -1,
      };
      this.$emit("change", popup);
    },

    onCancel() {
      var popup = {
        show: false,
        type: 0,
      };
      this.$emit("change", popup);
    },

    onConfirm() {
      var popup = {
        show: false,
        type: 1,
      };
      this.$emit("change", popup);
    },
    async userUpdate() {
      let param = { temporary: 0 };
      let { data } = await this.$http.post("/api/user/update", param, 1);
			this.onConfirm()
      uni.showToast({
        title: "操作成功",
        icon: "none",
      });
    },

    updateMsg() {
      // randomCode: "M4XWZ3"
      if (!this.userCode) {
        uni.showToast({
          title: "请输入",
          icon: "none",
        });
        return;
      }
      if (this.userCode.length > 10) {
        uni.showToast({
          title: `不能超过10个字符`,
          icon: "none",
          duration: 3000,
        });
        return;
      }
      this.$http
        .post(
          "/api/user/bindUser",
          {
            code: this.userCode,
          },
          1,
          1
        )
        .then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: "操作成功",
            });
						this.onConfirm()
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        });
    },
  },
};
</script>

<style>
.modal-content {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  text-align: left;
  background-color: rgba(0, 0, 0, 0.2);
}

.modal-box {
  position: absolute;
  width: 650rpx;
  height: 500rpx;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8rpx;
  background-color: #fff;
  transition: opacity 0.2s ease-in;
  opacity: 0;
}

.modal-content.show .modal-box {
  opacity: 1;
}

.modal-tit {
  font-size: 34rpx;
  font-weight: bold;
  text-align: center;
  padding-top: 26rpx;
  /* border: solid aqua; */
}

.scmodel-content {
  text-align: center;
  padding: 1rpx 40rpx;
}

.btnConfirm {
  flex: 1;
  height: 60rpx;
  color: #fff;
  font-size: 28rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 8rpx;
  background: linear-gradient(271deg, #389bfe 0%, #1572f9 100%);
}

.btnCancel {
  color: #0363fa;
  background: #fff;
  border: 1rpx solid #0363fa;
  /* margin: 0rpx 36rpx 0rpx 30rpx; */
}

.close-modal {
  position: absolute;
  bottom: -140rpx;
  left: 50%;
  width: 64rpx;
  height: 64rpx;
  margin-left: -32rpx;
  z-index: 99;
}
</style>
